import './index.less';
import PropTypes from 'prop-types';
import { useEffect } from 'react';

export default function Progress(props) {
  const { height, round, parColor, parNum, contentNum, contentColor, mirror } =
    props;
  let parentStyle = {
    backgroundColor: parColor || 'rgb(226, 226, 226)',
    height: height || '1em',
    borderRadius: round ? '1em' : '',
    width: '100%',
    transform: mirror ? 'scaleX(-1)' : '',
  };
  let contentStyle = {
    width: contentNum && parNum ? (contentNum / parNum) * 100 + '%' : '0%',
    backgroundColor: contentColor || 'red',
    height: height || '1em',
    borderRadius: round ? '1em' : '',
  };
  let contentTextStyle = {
    textAligin: mirror ? 'right' : 'left',
  };
  return (
    <>
      <div className="parent" style={parentStyle}>
        <div className="content" style={contentStyle}></div>
      </div>
      <span style={contentTextStyle}>
        {contentNum || 0}/{parNum || 100}
      </span>
    </>
  );
}
Progress.propTypes = {
  /**内进度条颜色*/
  contentColor: PropTypes.string,
  /**进度条总数值*/
  parNum: PropTypes.number,
  /**当前进度条数值*/
  contentNum: PropTypes.number,
  /**进度条高度*/
  height: PropTypes.string,
  /**是否需要圆角*/
  round: PropTypes.bool,
  /**进度条背景颜色*/
  parColor: PropTypes.string,
  /**是否镜像*/
  mirror: PropTypes.bool,
};
